<template>
  <el-container v-loading="loading" class="app-container">
    <el-main class="page-home">
      <div class="page-home-header">
        <div class="home-title">人员实时信息</div>
        <ShowTime :style-obj="{ color: '#0ebfbf', 'font-size': '28px' }" />
      </div>
      <!-- <div style="margin-top:10px;">
        <el-select v-model="listQuery.deviceName" style="width: 180px;" filterable placeholder="请输入人员姓名" class="filter-item">
          <el-option v-for="item in personInfoList" :key="item.deviceName" :label="item.trainIdStr" :value="item.deviceName" />
        </el-select>
        <el-select v-model="listQuery.userId" style="width: 180px;" clearable placeholder="请输入手持设备ID" class="filter-item">
          <el-option v-for="item in personInfoList" :key="item.userId" :label="item.trainIdStr" :value="item.userId" />
        </el-select>
        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getPersonInfo">
          搜索人员
        </el-button>
      </div> -->

      <div class="block block-custom">
        <!-- <el-dialog
        title="提示"
        :append-to-body='true'
        :visible.sync="requestState"
        :close-on-click-modal = "false"
        width="30%"
        :before-close="handleClose">
        <span>获取请求失败，是否要刷新页面</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="requestState = false">忽 略</el-button>
          <el-button type="primary" @click="reFreshHtml">刷 新</el-button>
        </span>
        </el-dialog> -->
        <el-tabs type="border-card" v-model="activeTab">
          <!-- 图形展示区域 -->
          <el-tab-pane label="图形展示" name="picture" :key="updatenumber">
            <div class="page-home-wrapper">
              <div ref="titleBadge" v-for="(item, index) in personInfoList.slice((currentPage - 1) * pagesize, currentPage * pagesize)" :key="changePersonInfoList" v-touch-ripple class="function-enter" @click="CheckTrainInfoDetail(item.userId)">
                <!-- <el-badge :class="{ border_red: item.alarmLevel == '1', border_orange: item.alarmLevel == '2', border_yellow: item.alarmLevel == '3', border_white: item.alarmLevel != '1' && item.alarmLevel != '2' && item.alarmLevel != '3' }" :value="item.personPreWarnInfo.preWarns.length" :max="99" class="item" type="danger"> -->
                <el-badge> 
                  <div class="function-enter-img">
                    <svg-icon v-if="item.traceWarnState == '在线'" icon-class="person-online" class-name="icon-person-svg" style="height: 100px; font-size: 100px" />
                    <svg-icon v-else icon-class="person-offline" class-name="icon-person-svg" style="height: 100px; font-size: 100px" />
                  </div>
                </el-badge>
                <el-tooltip placement="bottom" effect="light">
                  <div slot="content">{{ item.userdeviceinfo }}</div>
                  <div class="function-enter-tip" style="max-width: 100px; max-height: 20px; text-overflow: ellipsis; white-space: inherit; overflow: hidden">
                    {{ item.userdeviceinfo }}
                  </div>
                </el-tooltip>
              </div>
            </div>
          </el-tab-pane>

          <!-- 列表展示区域 -->
          <el-tab-pane label="列表展示" name="table" style="color: white">
            <el-table :expand-row-keys="expends" :row-key="getRowKeys" v-loading="personLoading" :key="changePersonInfoList" :data="personInfoList.slice((currentPage - 1) * pagesize, currentPage * pagesize)" border fit highlight-current-row style="width: 100%" @sort-change="sortChange">
              <!-- 下拉列表展示区域 -->
              <el-table-column type="expand" style="padding: 5px">
                <template slot-scope="scope">
                  <!-- 机车详情、设备gnss定位信息、列车运行实时信、事件窗展示区域 -->
                  <el-row :gutter="0">
                    <!-- 机车详情展示区域 -->
                    <el-col :span="10" style="padding-left: 60px; padding-right: 30px; height: 180px">
                      <el-card class="box-card" style="height: 100%">
                        <div slot="header" class="clearfix">
                          <span style="color: #88db85; font-weight: bolder">设备账户信息</span>
                        </div>
                        <el-form style="color: #18f4ff" label-position="left" label-width="60px" class="item-detail-form">
                          <el-row :gutter="0">
                            <el-col :span="12">
                              <el-form-item label="设备id">
                                <span>{{ scope.row.userId }}</span>
                              </el-form-item>
                            </el-col>
                            <el-col :span="12">
                              <el-form-item label="账户">
                                <span>{{ scope.row.userAccount }}</span>
                              </el-form-item>
                            </el-col>
                          </el-row>
                          <el-row :gutter="0">
                            <!-- <el-col :span="12">
                              <el-form-item label="设备名">
                                <span>{{ scope.row.deviceName }}</span>
                              </el-form-item>
                            </el-col> -->
                            <el-col :span="12">
                              <el-form-item label="姓名">
                                <span>{{ scope.row.personName }}</span>
                              </el-form-item>
                            </el-col>
                          </el-row>
                        </el-form>
                      </el-card>
                    </el-col>

                    <!-- 设备gnss定位信息展示区域 -->
                    <el-col :span="14" style="padding-right: 30px; height: 180px">
                      <el-card class="box-card" style="height: 100%">
                        <div slot="header" class="clearfix">
                          <span style="color: #88db85; font-weight: bolder">卫星定位信息</span>
                        </div>
                        <el-form style="color: #18f4ff" label-position="left" label-width="50px" class="item-detail-form">
                          <el-row :gutter="0">
                            <el-col :span="8">
                              <el-form-item class=".el-form-item__label" label="经度">
                                <span v-if="scope.row.GnssInfo.lon">{{ ToDegrees(String(scope.row.GnssInfo.lon / 3600000)) }}</span>
                              </el-form-item>
                            </el-col>
                            <el-col :span="8">
                              <el-form-item label="搜星">
                                <span v-if="scope.row.GnssInfo.satellite">{{ scope.row.GnssInfo.satellite }} 颗</span>
                                <span v-else-if="scope.row.GnssInfo.satellite == 0">0 颗</span>
                              </el-form-item>
                            </el-col>
                            <el-col :span="8">
                              <el-form-item label="速度">
                                <span v-if="scope.row.GnssInfo.speed">{{ parseFloat((scope.row.GnssInfo.speed * 3.6) / 100).toFixed(2) }}km/h</span>
                              </el-form-item>
                            </el-col>
                          </el-row>
                          <el-row :gutter="0">
                            <el-col :span="8">
                              <el-form-item label="纬度">
                                <span v-if="scope.row.GnssInfo.lon">{{ ToDegrees(String(scope.row.GnssInfo.lat / 3600000)) }}</span>
                              </el-form-item>
                            </el-col>
                            <el-col :span="8">
                              <el-form-item label="精度">
                                <span v-if="scope.row.GnssInfo.accuracyType == 1">{{ scope.row.GnssInfo.accur_dis / 100 }}(m)</span>
                                <span v-else-if="scope.row.GnssInfo.accuracyType == 2">{{ scope.row.GnssInfo.accur_hdop / 100 }}(hdop)</span>
                              </el-form-item>
                            </el-col>
                            <el-col :span="8">
                              <el-form-item label="模式">
                                <span v-if="scope.row.GnssInfo.mode == 0">无效</span>
                                <span v-else-if="scope.row.GnssInfo.mode == 1">单点</span>
                                <span v-else-if="scope.row.GnssInfo.mode == 2">差分</span>
                                <span v-else-if="scope.row.GnssInfo.mode == 4">差分固定解</span>
                                <span v-else-if="scope.row.GnssInfo.mode == 5">差分浮点解</span>
                              </el-form-item>
                            </el-col>
                          </el-row>
                        </el-form>
                      </el-card>
                    </el-col>

                    <!-- 事件窗展示区域 -->
                    <!-- <el-col :span="6" style="padding-right:60px;height:310px;">
                      <el-card class="event-window" style="height:100%">
                        <div slot="header" class="card-header">
                          <div>事件窗</div>
                          <div>
                            排序：
                            <el-radio-group v-model="reverse">
                              <el-radio :label="false">正序</el-radio>
                              <el-radio :label="true">倒序</el-radio>
                            </el-radio-group>
                          </div>
                        </div>
                        <el-scrollbar style="height:100%">
                          <el-timeline :reverse="reverse">
                            <el-timeline-item v-for="(evt, index) in scope.row.trainEventInfo" :key="index" :timestamp="evt.timestamp">{{ evt.content }}</el-timeline-item>
                          </el-timeline>
                        </el-scrollbar>
                      </el-card>
                    </el-col> -->
                  </el-row>

                  <!-- 报警信息展示区域 -->
                  <el-row style="padding-top: 15px; padding-right: 30px; padding-left: 60px">
                      <el-col :span="24">
                        <el-card class="prewarn-detail-table" :body-style="{ padding: '10px' }">
                          <div slot="header" class="card-header" style="color: #88db85; font-weight: bolder">人员持续报警（共 {{ scope.row.personPreWarnInfo.alarms.length }} 条）</div>

                          <el-table :data="scope.row.personPreWarnInfo.alarms" style="width: 100%" :key="preWarnRowKeys">
                            <el-table-column label="发生时间" align="center">
                              <span slot-scope="preWarnsScope">{{ preWarnsScope.row.happenTime }}</span>
                            </el-table-column>
                            <el-table-column label="报警内容" align="center">
                              <span slot-scope="preWarnsScope">{{ preWarnsScope.row.alarmContent }}</span>
                            </el-table-column>
                          </el-table>
                        </el-card>
                      </el-col>
                    </el-row>
                </template>
              </el-table-column>

              <el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="80">
                <template slot-scope="scope">
                  <span>{{ (listQuery.page - 1) * listQuery.size + scope.$index + 1 }}</span>
                </template>
              </el-table-column>

              <el-table-column label="设备id" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.userId }}</span>
                </template>
              </el-table-column>
              <!-- <el-table-column label="设备名" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.deviceName }}</span>
                </template>
              </el-table-column> -->
              <!-- <el-table-column label="位置" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.personRTInfo.stationNo">{{ stationname_list[scope.row.personRTInfo.stationNo] }}</span>
                </template>
              </el-table-column> -->
              <el-table-column label="位置" align="center">
                <template slot-scope="scope">
                  <el-tooltip content="scope.row.OnTrackInfo" placeholder="bottom" effect="light">
                    <template #content>
                      {{scope.row.onTrackInfo}}
                    </template>
                    <div class="function-enter-tip" style="max-width: 200px; max-height: 20px; text-overflow: ellipsis; white-space: inherit; overflow: hidden">
                      <span v-if="scope.row.trackInfo">{{ scope.row.trackInfo }}</span>
                      <span v-else>空</span>
                    </div>
                  </el-tooltip>
                </template>
              </el-table-column>
              <!-- <el-table-column label="预警等级" align="center">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.alarmLevel == 1" type="danger">一级预警</el-tag>
                  <el-tag v-else-if="scope.row.alarmLevel == 2" type="warning">二级预警</el-tag>
                  <el-tag v-else-if="scope.row.alarmLevel == 3" type="info">三级预警</el-tag>
                  <span v-else>无预警</span>
                </template>
              </el-table-column> -->

              <el-table-column label="账户" align="center">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.userAccount && scope.row.personName" type="success" effect="dark">{{ scope.row.userAccount }}/{{ scope.row.personName }}</el-tag>
                  <el-tag v-else-if="scope.row.userAccount" type="success" effect="dark">{{ scope.row.userAccount }}</el-tag>
                  <el-tag v-else type="info" effect="dark">未登录</el-tag>
                </template>
              </el-table-column>
                <el-table-column label="服务状态" align="center">
                  <template slot-scope="scope">
                    <svg-icon v-if="scope.row.traceWarnState === '在线'" icon-class="tws_online" class-name="icon-net-svg" style="height: 23px; font-size: 50px" />
                    <svg-icon v-else icon-class="tws_offline" class-name="icon-net-svg" style="height: 23px; font-size: 50px" />
                  </template>
                </el-table-column>

                <!-- <el-table-column label="网络1" align="center">
                  <template slot-scope="scope">
                    <svg-icon v-if="scope.row.NetState === '在线'" icon-class="net-online" class-name="icon-net-svg" style="height: 25px; font-size: 50px" />
                    <svg-icon v-else icon-class="net-offline" class-name="icon-net-svg" style="height: 25px; font-size: 50px" />
                  </template>
                </el-table-column> -->
                <!-- <el-table-column label="网络2" align="center">
                <template slot-scope="scope">
                  <svg-icon  icon-class="net-offline" class-name="icon-net-svg" style="height:25px;font-size:50px" />
                 
                </template>
              </el-table-column> -->

              <el-table-column label="定位模式" align="center">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.GnssInfo.mode == 0" type="danger" effect="dark">无效</el-tag>
                  <el-tag v-else-if="scope.row.GnssInfo.mode == 1" effect="dark">单点</el-tag>
                  <el-tag v-else-if="scope.row.GnssInfo.mode == 2" type="success" effect="dark">差分</el-tag>
                  <el-tag v-else-if="scope.row.GnssInfo.mode == 4" type="success" effect="dark">差分固定解</el-tag>
                  <el-tag v-else-if="scope.row.GnssInfo.mode == 5" type="success" effect="dark">差分浮点解</el-tag>
                  <el-tag v-else type="info" effect="dark">未知</el-tag>
                </template>
              </el-table-column>

              <!-- <el-table-column label="任务信息" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.taskInfo }}</span>
                </template>
              </el-table-column> -->
            </el-table>
          </el-tab-pane>
          <el-pagination background layout="total, sizes, prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pagesize" :page-sizes="[10, 40, 100, 200, 500]" :total="personInfoList.length" align="center"> </el-pagination>
        </el-tabs>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { mapGetters } from 'vuex'
import { formatDate } from '@/utils/index'
import touchRipple from '@/directive/touchripple'
import ShowTime from '@/components/ShowTime'
import { getStationInfos } from '@/api/gis'
import waves from '@/directive/waves' // Waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { getUserPageInfos, TWS, getuserDeviceInfos, getuserInfo, getNetState } from '@/api/personInfo'
import { deepClone } from '@/utils'

export default {
  name: 'personinfopage',
  directives: {
    touchRipple
  },
  components: {
    ShowTime,
    Pagination
  },
  directives: { waves, touchRipple },
  data() {
    const defaultEnd = new Date()
    const defaultStart = new Date()
    defaultStart.setTime(defaultStart.getTime() - 3600 * 1000 * 24)
    return {
      requestState: false,
      updatenumber: 0,
      changePersonInfoList: 0,
      currentPage: 1,
      totalDataLength: 15,
      pagesize: 10,
      requireChannels: {
        //需要订阅的频道放在这里
        channels: [],
        //发出申请的组件名字放在这里
        component: 'personInfo'
      },
      preWarnRowKeys: 0,
      loading: false,
      personLoading: false,
      personInfoList: [],
      // trainInfoPictureList: [],
      tableKey: 0,
      nowTime: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'),
      timer: null,
      reverse: false,
      listQuery: {
        page: 1,
        size: 10,
        deviceNo: '',
        deviceType: '03',
        deviceId: '',
        manufactor: '',
        model: '',
        isActive: '',
        deviceName: ''
      },
      total: 0,
      activeTab: 'picture',
      //展开行
      expends: []
    }
  },
  computed: {
    ...mapGetters(['name'])
  },
  created() {},
  mounted() {
      console.log(this.personInfoList);
    getStationInfos()
      .then(response => {
        if (response.code == 0) {
          this.stationname_list = new Map()
          for (var key in response.data) {
            this.stationname_list[key] = response.data[key].name
          }
        } else this.requestState = true
      })
      .catch(error => {
        if (error.message.includes('timeout')) {
          this.requestState = true
        }
      })
    const _this = this // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      _this.nowTime = formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss') // 修改数据date
    }, 1000)
    this.getPersonInfo()
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }

    if (this.requireChannels.channels.length > 0) {
      //向全局申请取消订阅频道（订阅请求，订阅信息）
      this.$bus.$emit('Unsubscribe', this.requireChannels)

      // 关闭接收数据
      this.requireChannels.channels.forEach(element => {
        this.sockets.unsubscribe(element)
      })
    }
  },
  methods: {
    hasRepeat(arr1, arr2) {
      if (arr1.length === 0) {
        return false
      }
      if (arr2.length === 0) {
        return false
      }
      var flag = false
      for (var i = 0; i < arr1.length; i++) {
        if (arr2.indexOf(arr1[i]) >= 0) {
          flag = true
          break
        }
      }
      return flag
    },

    reFreshHtml() {
      this.$router.go(0)
    },
    getPersonInfo() {
      var selectUserType
      selectUserType = {
        deviceType: 2
      }
      // if(this.$store.getters.configJson && this.$store.getters.configJson.noNeedOrg)
      // selectUserType = {
      //   deviceType: [2, 3]
      // }
      // else selectUserType = {
      //   orgIds: this.$store.getters.org[this.$store.getters.org.length - 1],
      //   deviceType: [2, 3]
      // }
      getUserPageInfos(selectUserType)
        .then(response => {
          if (response.code == 0) {
            var start = this.listQuery.size * (this.listQuery.page - 1)
            var end = this.listQuery.page * this.listQuery.size
            var length = 0
            var personNetSearchList = []
            var personNetSearchList2 = []
            this.personInfoList = []
            for (var i = 0; i < response.data.length; i++) {
              // if (this.hasRepeat(this.$store.getters.stationIds, response.data[i].stationIds) && (response.data[i].deviceType == 2 || response.data[i].deviceType == 3))  //权限屏蔽
              {
                this.personInfoList.push({})
                this.personInfoList[length] = {
                  userId: 0,
                  deviceType: '',
                  userdeviceinfo: '',
                  userAccount: '',
                  deviceName: '',
                  GnssInfo: '',
                  personPreWarnInfo: { alarms: [] },
                  personRTInfo: '',
                  traceWarnState: '',
                  NetState: '',
                  stationNo: '',
                  LoginuserId: '',
                  personName: ''
                }

                if (response.data[i].deviceId) {
                  this.personInfoList[length].deviceType = response.data[i].deviceType
                  personNetSearchList.push(response.data[i].deviceId)
                  this.personInfoList[length].userId = response.data[i].deviceId
                  this.personInfoList[length].LoginuserId = response.data[i].userId
                  this.personInfoList[length].userAccount = response.data[i].deviceAccount
                  this.personInfoList[length].deviceName = response.data[i].deviceName
                  if (this.personInfoList[length].deviceName == null) this.personInfoList[length].userdeviceinfo = this.personInfoList[length].userId
                  else this.personInfoList[length].userdeviceinfo = this.personInfoList[length].deviceName + ' (' + this.personInfoList[length].userId + ')'
                  if (this.personInfoList[length].userAccount) this.personInfoList[length].userdeviceinfo = this.personInfoList[length].userdeviceinfo + '/' + this.personInfoList[length].userAccount
                  if (this.personInfoList[length].LoginuserId)
                    getUserInfo(this.personInfoList[length].LoginuserId)
                      .then(response => {
                        if (response.code == 0) {
                          for (var i in this.personInfoList)
                            if (this.personInfoList[i].LoginuserId == response.data.userId) {
                              this.personInfoList[i].personName = response.data.personName
                              if (this.personInfoList[i].deviceName == null) this.personInfoList[i].userdeviceinfo = this.personInfoList[i].userId
                              else this.personInfoList[i].userdeviceinfo = this.personInfoList[i].deviceName + ' (' + this.personInfoList[i].userId + ')'
                              if (this.personInfoList[i].userAccount) this.personInfoList[i].userdeviceinfo = this.personInfoList[i].userdeviceinfo + '/' + this.personInfoList[i].userAccount
                            }
                        } else this.requestState = true
                      })
                      .catch(error => {
                        if (error.message.includes('timeout')) {
                          this.requestState = true
                        }
                      })
                }
                length = length + 1
              }
            }

            getNetState(personNetSearchList, 2)
              .then(response => {
                if (response.code == 0) {
                  for (var i in response.data)
                    for (var j in this.personInfoList)
                      if (this.personInfoList[j].userId == i) {
                        if (response.data[i] == 0) this.personInfoList[j].NetState = '在线'
                        else if (response.data[i] == 1) this.personInfoList[j].NetState = '离线'
                      }
                } else this.requestState = true
              })
              .catch(error => {
                if (error.message.includes('timeout')) {
                  this.requestState = true
                }
              })

            getNetState(personNetSearchList2, 3)
              .then(response => {
                if (response.code == 0) {
                  for (var i in response.data)
                    for (var j in this.personInfoList)
                      if (this.personInfoList[j].userId == i) {
                        if (response.data[i] == 0) this.personInfoList[j].NetState = '在线'
                        else if (response.data[i] == 1) this.personInfoList[j].NetState = '离线'
                      }
                } else this.requestState = true
              })
              .catch(error => {
                if (error.message.includes('timeout')) {
                  this.requestState = true
                }
              })

            this.total = this.personInfoList.length
            this.subSocketChannel()
            TWS(2)
              .then(response => {
                if (response.code == 0) {
                  let that = this

                  for (const key in response.data.deviceInfos) {
                    for (var i = 0; i < this.personInfoList.length; i++) {
                      if (key == this.personInfoList[i].userId) {
                        this.personInfoList[i].stationNo = response.data.deviceInfos[key]
                        this.personInfoList[i].traceWarnState = '在线'
                      }
                    }
                  }
                  this.personInfoList.sort((a, b) => {
                    return (b.traceWarnState === '在线') - (a.traceWarnState === '在线');
                  });
                  if (this.changePersonInfoList == 0) {
                    this.changePersonInfoList = 1
                  } else {
                    this.changePersonInfoList = 0
                  }
                  this.updatenumber++
                } else this.requestState = true
                this.subSocketChannel()
              })
              .catch(error => {
                if (error.message.includes('timeout')) {
                  this.requestState = true
                }
              })

            TWS(3)
              .then(response => {
                if (response.code == 0) {
                  let that = this

                  for (const key in response.data.deviceInfos) {
                    for (var i = 0; i < this.personInfoList.length; i++) {
                      if (key == this.personInfoList[i].userId) {
                        this.personInfoList[i].stationNo = response.data.deviceInfos[key]
                        this.personInfoList[i].traceWarnState = '在线'
                      }
                    }
                  }
                  this.personInfoList.sort((a, b) => {
                    return (b.traceWarnState === '在线') - (a.traceWarnState === '在线');
                  });
                  if (this.changePersonInfoList == 0) {
                    this.changePersonInfoList = 1
                  } else {
                    this.changePersonInfoList = 0
                  }
                  this.updatenumber++
                } else this.requestState = true

              })
              .catch(error => {
                if (error.message.includes('timeout')) {
                  this.requestState = true
                }
              })

            //申请订阅socket频道
          } else {
            this.requestState = true
            this.$message.error(response.msg)
          }
        })
        .catch(error => {
          if (error.message.includes('timeout')) {
            this.requestState = true
          }
        })
    },
    subSocketChannel() {
      if (this.personInfoList.length === 0) {
        return
      }
      //取消所有订阅
      if (this.requireChannels.channels.length > 0) {
        //向全局申请取消订阅频道（订阅请求，订阅信息）
        for (var i = 0; i < this.requireChannels.channels.length; i++) {
          this.sockets.unsubscribe(this.requireChannels.channels[i])
        }
      }

      //清空请求list
      this.requireChannels.channels = []
      this.requireChannels.channels.push('UserLoginDeviceInfo')
      this.requireChannels.channels.push('TWS_Entitys:PersonHT')
      this.requireChannels.channels.push('TWS_Entitys:PersonLT')
      //订阅频道
      this.personInfoList.slice((this.currentPage - 1) * this.pagesize, this.currentPage * this.pagesize).forEach(element => {
        {
          var gnssInfoChannelName = 'GnssInfo:' + element.userId + '_2'
          var personRTInfoChannelName = 'PersonRTInfo_HT:' + element.userId + '_2'
          var personDetailInfoChannelName = 'PersonDetailInfo:' + element.userId + '_2'
          var personNetStateChannelName = 'HT_NetState:' + element.userId
        } 
        // else if (element.deviceType == 3) {
        //   var gnssInfoChannelName = 'GnssInfo:' + element.userId + '_' + element.deviceType
        //   var personRTInfoChannelName = 'LocateTerminalRTInfo_LT:' + element.userId + '_' + element.deviceType
        //   var personPreWarnInfoChannelName = 'LocateTerminalPreWarnInfo_LT:' + element.userId + '_' + element.deviceType
        //   var personNetStateChannelName = 'LT_NetState:' + element.userId
        // }
        this.requireChannels.channels.push(gnssInfoChannelName)
        this.requireChannels.channels.push(personRTInfoChannelName)
        this.requireChannels.channels.push(personDetailInfoChannelName)
        this.requireChannels.channels.push(personNetStateChannelName)
      })

      //向全局申请订阅频道（订阅请求，订阅信息）
      this.$bus.$emit('Subscribe', this.requireChannels)
      this.sockets.subscribe('UserLoginDeviceInfo', res => {
        let that = this
        for (var key in res.data) {
          if (res.data[key] == null) {
            for (var i = 0; i < this.personInfoList.length; i++)
              if (this.personInfoList[i].LoginuserId == key) {
                this.personInfoList[i].userAccount = ''
                this.personInfoList[i].LoginuserId = ''
                this.personInfoList[i].personName = ''
                if (this.personInfoList[i].deviceName == null) this.personInfoList[i].userdeviceinfo = this.personInfoList[i].userId
                else this.personInfoList[i].userdeviceinfo = this.personInfoList[i].deviceName + '(' + this.personInfoList[i].userId + ')'
                if (this.personInfoList[i].userAccount) this.personInfoList[i].userdeviceinfo = this.personInfoList[i].userdeviceinfo + '/' + this.personInfoList[i].userAccount
                this.updatenumber++
              }
          } else {
            for (var i = 0; i < this.personInfoList.length; i++)
              if (this.personInfoList[i].userId == res.data[key].deviceId) {
                this.personInfoList[i].LoginuserId = key
                getUserInfo(key)
                  .then(response => {
                    if (response.code == 0) {
                      for (var i in this.personInfoList)
                        if (this.personInfoList[i].LoginuserId == key) {
                          this.personInfoList[i].userAccount = response.data.userName
                          this.personInfoList[i].personName = response.data.personName
                          if (this.personInfoList[i].deviceName == null) this.personInfoList[i].userdeviceinfo = this.personInfoList[i].userId
                          else this.personInfoList[i].userdeviceinfo = this.personInfoList[i].deviceName + '(' + this.personInfoList[i].userId + ')'
                          if (this.personInfoList[i].userAccount) this.personInfoList[i].userdeviceinfo = this.personInfoList[i].userdeviceinfo + '/' + this.personInfoList[i].userAccount
                          this.updatenumber++
                        }
                    } else this.requestState = true
                  })
                  .catch(error => {
                    if (error.message.includes('timeout')) {
                      this.requestState = true
                    }
                  })
              }
          }
        }
      })
      this.sockets.subscribe('TWS_Entitys:PersonHT', res => {
        if (res.props.type == 'sync' || res.props.type == 'add') {
          for (const key in res.data.deviceInfos) {
            for (var i = 0; i < this.personInfoList.length; i++) {
              if (key == this.personInfoList[i].userId) {
                this.personInfoList[i].stationNo = res.data.deviceInfos[key]
                this.personInfoList[i].traceWarnState = '在线'
                this.updatenumber++
              }
            }
          }
        }
        if (res.props.type == 'change') {
          for (const key in res.data.deviceInfos) {
            for (var i = 0; i < this.personInfoList.length; i++) {
              if (key == this.personInfoList[i].userId) {
                this.personInfoList[i].stationNo = res.data.deviceInfos[key]
                this.personInfoList[i].traceWarnState = '在线'
                this.updatenumber++
              }
            }
          }
        }
        if (res.props.type == 'delete') {
          for (const key in res.data.deviceInfos) {
            for (var i = 0; i < this.personInfoList.length; i++) {
              if (key == this.personInfoList[i].userId) {
                this.personInfoList[i].stationNo = ''
                this.personInfoList[i].alarmLevel = ''
                this.personInfoList[i].onTrackInfo = ''
                this.personInfoList[i].personPreWarnInfo = { alarms: [] }
                this.personInfoList[i].personRTInfo = ''
                this.personInfoList[i].GnssInfo = ''
                this.personInfoList[i].traceWarnState = '不在线'
                this.updatenumber++
              }
            }
          }
        }
      })

      this.sockets.subscribe('TWS_Entitys:PersonLT', res => {
        if (res.props.type == 'sync' || res.props.type == 'add') {
          for (const key in res.data.deviceInfos) {
            for (var i = 0; i < this.personInfoList.length; i++) {
              if (key == this.personInfoList[i].userId) {
                this.personInfoList[i].stationNo = res.data.deviceInfos[key]
                this.personInfoList[i].traceWarnState = '在线'
                this.updatenumber++
              }
            }
          }
        }
        if (res.props.type == 'change') {
          for (const key in res.data.deviceInfos) {
            for (var i = 0; i < this.personInfoList.length; i++) {
              if (key == this.personInfoList[i].userId) {
                this.personInfoList[i].stationNo = res.data.deviceInfos[key]
                this.personInfoList[i].traceWarnState = '在线'
                this.updatenumber++
              }
            }
          }
        }
        if (res.props.type == 'delete') {
          for (const key in res.data.deviceInfos) {
            for (var i = 0; i < this.personInfoList.length; i++) {
              if (key == this.personInfoList[i].userId) {
                this.personInfoList[i].stationNo = ''
                this.personInfoList[i].alarmLevel = ''
                this.personInfoList[i].onTrackInfo = ''
                this.personInfoList[i].trackInfo = ''
                this.personInfoList[i].personPreWarnInfo = { alarms: [] }
                this.personInfoList[i].personRTInfo = ''
                this.personInfoList[i].GnssInfo = ''
                this.personInfoList[i].traceWarnState = '不在线'
                this.updatenumber++
              }
            }
          }
        }
      })
      // 接收数据
      this.personInfoList.slice((this.currentPage - 1) * this.pagesize, this.currentPage * this.pagesize).forEach(element => {
        {
          var gnssInfoChannelName = 'GnssInfo:' + element.userId + '_2'
          var personRTInfoChannelName = 'PersonRTInfo_HT:' + element.userId + '_2'
          var personDetailChannelName = 'PersonDetailInfo:' + element.userId + '_2'
          var personNetStateChannelName = 'HT_NetState:' + element.userId
        } 
        // else if (element.deviceType == 3) {
        //   var gnssInfoChannelName = 'GnssInfo:' + element.userId + '_' + element.deviceType
        //   var personRTInfoChannelName = 'LocateTerminalRTInfo_LT:' + element.userId + '_' + element.deviceType
        //   var personPreWarnInfoChannelName = 'LocateTerminalPreWarnInfo_LT:' + element.userId + '_' + element.deviceType
        //   var personNetStateChannelName = 'LT_NetState:' + element.userId
        // }
        this.sockets.subscribe(personNetStateChannelName, res => {
          if (res.data.commsvr.wireless[element.userId] == 0) element.NetState = '在线'
          if (res.data.commsvr.wireless[element.userId] == 1) element.NetState = '离线'
        })
        this.sockets.subscribe(gnssInfoChannelName, res => {
          element.GnssInfo = res.data
        })
        this.sockets.subscribe(personRTInfoChannelName, res => {
          element.personRTInfo = res.data
          element.onTrackInfo = ''

          for (var i = 0; i < element.personRTInfo.onTrackIndexs.length; i++) {
            var track_type = ''
            if (element.personRTInfo.coverRoute[element.personRTInfo.onTrackIndexs[i]].dType == 'switch') element.personRTInfo.coverRoute[element.personRTInfo.onTrackIndexs[i]].part == 'previous' ? (track_type = '道岔岔前') : element.personRTInfo.coverRoute[element.personRTInfo.onTrackIndexs[i]].part == 'normal' ? (track_type = '道岔定位') : (track_type = '道岔反位')
            if (element.onTrackInfo) element.onTrackInfo += '|' + element.personRTInfo.coverRoute[element.personRTInfo.onTrackIndexs[i]].dname + track_type
            else element.onTrackInfo += element.personRTInfo.coverRoute[element.personRTInfo.onTrackIndexs[i]].dname + track_type
          }
        })
        this.sockets.subscribe(personDetailChannelName, res => {
          element.personPreWarnInfo = res.data
          var areaNo = 4
          element.onTrackInfo = ''
          element.trackInfo = ''
          for (var i = 0; i < element.personPreWarnInfo.trackNames.length; i++) {
            var track_type = ''
            if (element.personPreWarnInfo.trackNames[i].switchPart != 0) element.personPreWarnInfo.trackNames[i].switchPart == 1 ? (track_type = '岔前') : 
            element.personPreWarnInfo.trackNames[i].switchPart == 2 ? (track_type = '定位') : (track_type = '反位')
            if (element.onTrackInfo) {
              element.onTrackInfo += '|' + element.personPreWarnInfo.trackNames[i].trackName + track_type
              element.trackInfo += '|' + element.personPreWarnInfo.trackNames[i].trackName + track_type
            }
            else {
              element.onTrackInfo += element.personPreWarnInfo.trackNames[i].trackName + track_type
              element.trackInfo += element.personPreWarnInfo.trackNames[i].trackName + track_type
            }
            element.onTrackInfo += ' 水平偏移：' + element.personPreWarnInfo.trackNames[i].distanceInTrack + 'cm'
            element.onTrackInfo += ' 垂直偏移：' + element.personPreWarnInfo.trackNames[i].distanceToTrack + 'cm'
          }
          for (var i = 0; i < element.personPreWarnInfo.alarms.length; i++) {
            if (element.personPreWarnInfo.alarms[i].areaNo < areaNo) areaNo = element.personPreWarnInfo.alarms[i].areaNo
          }
          areaNo = areaNo + 1
          element.alarmLevel = areaNo
          this.updatenumber++
        })
      })
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
      this.subSocketChannel()
    },
    handleSizeChange: function (size) {
      this.pagesize = size
      this.subSocketChannel()
    },
    sortChange(data) {
      const { prop, order } = data
      if (prop === 'id') {
        this.sortByID(order)
      }
    },
    ToDegrees(val) {
      if (typeof val == 'undefined' || val == '') {
        return ''
      }
      var i = val.indexOf('.')
      var strDu = i < 0 ? val : val.substring(0, i) //获取度
      var strFen = 0
      var strMiao = 0
      if (i > 0) {
        var strFen = '0' + val.substring(i)
        strFen = strFen * 60 + ''
        i = strFen.indexOf('.')
        if (i > 0) {
          strMiao = '0' + strFen.substring(i)
          strFen = strFen.substring(0, i) //获取分
          strMiao = strMiao * 60 + ''
          i = strMiao.indexOf('.')
          strMiao = strMiao.substring(0, i + 4) //取到小数点后面三位
          strMiao = parseFloat(strMiao).toFixed(0) //精确小数点后面两位
        }
      }
      return strDu + '°' + strFen + "'" + strMiao + '"'
    },
    CheckTrainInfoDetail(deviceId) {
      this.listQuery.deviceId = deviceId
      this.activeTab = 'table'
      //this.getPersonInfo()
      this.expends = []
      this.expends.push(deviceId)
      this.listQuery.deviceId = ''
    },
    //获取表格的行id
    getRowKeys(row) {
      return row.userId
    }
  }
}
</script>

<style scoped>
.border_red {
  border: 5px solid red;
}

.border_orange {
  border: 5px solid orange;
}

.border_yellow {
  border: 5px solid yellow;
}

.border_white {
  border: 5px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

/* 选中后的字体颜色 */
.el-radio__label {
  color: #ffffff !important;
}

/* 选中后的字体颜色 */
.el-radio__input.is-checked + .el-radio__label {
  color: #d7a511 !important;
}

/* 选中后小圆点的颜色 */
.el-radio__input.is-checked .el-radio__inner {
  background: #d7a511 !important;
  border-color: #d7a511 !important;
}

.el-timeline-item {
  padding-top: 8px !important;
}

.el-timeline-item__content {
  color: #f08040 !important;
}

.el-timeline-item__timestamp {
  color: rgb(192, 239, 63);
}

/deep/ .el-form-item__label {
  color: #00cab7 !important;
}
</style>
